<template>
  <NavBack title="商品详情" :hasBack="true"></NavBack>
  <GoodBanner :goodlist="goodlist"></GoodBanner>
  <div class="goods-one">
    <van-button
      type="primary"
      size="small"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      >{{ goodlist.brand }}</van-button
    >
    <van-text-ellipsis
      rows="1"
      :content="goodlist.proname"
      expand-text="展开"
      collapse-text="收起"
    />
  </div>
  <div class="goods-two">
    <p>价格￥:<span>{{goodlist.originprice}}</span></p>
    <p>折扣率:<span>{{goodlist.discount}}</span></p>
  </div>
  
  <div class="goods-three">
    <p>折后价：¥{{(goodlist.originprice*(goodlist.discount/10)).toFixed(2)}}</p>
    <p>数量：<van-stepper v-model="count" /></p>
  </div>
  <GoodFooter :num="count" :goodslistid="goodlist.proid"></GoodFooter>
</template>

<script>
import NavBack from "../../components/NavBack.vue";
import GoodBanner from "./swoper.vue";
import GoodFooter from "./footer.vue"
export default {
  components: { NavBack, GoodBanner,GoodFooter },
  data() {
    return {
      goodlist: {},
      count:1
    };
  },
  created() {
    this.getGoodslist();
  },
  methods: {
    getGoodslist() {
      this.$http({
        url: "/pro/detail/" + this.$route.params.id,
      }).then((res) => {
        this.goodlist = res.data.data;
        // console.log(res.data.data);
      });
    },
  },
};
</script>

<style scoped>
.goods-one {
  margin: 20px 10px;
}
.goods-two {
  margin: 20px 10px;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  color: rgb(2, 2, 2);
}
.goods-three {
  margin: 20px 10px;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  color: rgb(2, 2, 2);
}
.goods-three p:nth-child(2){
  margin-left:40px;
}
.goods-two p:nth-child(2){
  margin-left:40px;
}
.goods-two span{
  color: red;
}
.van-text-ellipsis{
  font-size: 14px;
  font-weight: 700;
}
.van-button {
  margin: 10px 0;
}
</style>